<template>

    <div  class="m-header">
    <div>
      <i class="icon-menu" @click="showMenu" ></i>
      <div class="select-bt">
        <i class="music icon-music active" ></i><!--:class= "selectIndex===0?'active':''" -->
        <i class="find icon-wangyi"></i>
        <i class="icon-community"></i>
      </div>
      <i class="icon-search"  @click="operation" ></i>
    </div>
    </div>

</template>

<script type="text/ecmascript-6">
  // import { mapMutations } from 'vuex';
  // import axios from 'axios';
  export default {
    name: "headerss",
    data() {
      return {}
    },
    methods: {
      showMenu() {//个人中心 点击事件
//         let conf = this.base.request.http.MyCenter;
//         // console.log(conf); return ;
//         axios.post(
//           conf.url, //http://music.163.com/weapi/user/playlist
//           conf.from,//raw 方式的 form 数据
//           conf.headers
//         ).then(function (response) {
//             console.log(response);
//           })
//           .catch(function (error) {
//             console.log(error);
//           });
// return ;

      },
      operation(){
        // console.log(this.$store.state.myCenter);
        console.log('点击操作')
      },
      // ...mapMutations({
      //   totalse:'increment'
      // })
    },

  }
</script>

<style lang="scss" scoped>
  @import "../../style/font-icon/style.css";
  @import '../../style/mixin';

  .m-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    color: rgb(241, 243, 244);
    font-size: 54px;
    background-color: rgb(210, 57, 48);
    height: 100px;
  }
  .m-header div:first-child{
    height: inherit;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top: 3px;
  }
  .m-header i{
    padding: 24px;
  }
  .select-bt{
    height: 80px;
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .select-bt i{
    color: rgb(228, 136, 130);
    padding: 15px 15px 15px 15px ;
  }
 .select-bt .active{
   color: rgb(241, 243, 244);
 }
</style>
